<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
     <!-- 1.引入vue.js -->
     <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- 1.v-if-->
        <div v-if="lang">1-控制元素显示与隐藏</div>
        <!-- 2.v-show -->
        <div v-show="lang">2-另一个v-show</div>
        <!-- 3.v-bind 可以简写为: -->
        <div v-bind:name="name">3-可以访问data里的数据,简写为 : </div>
        <!-- 4.v-on  可以简写为 @ -->
        <button v-on:click="doclick">4-绑定事件监听器,简写为 @ </button><br/>
        <!-- 5.v-model  -->
        <input type="text" placeholder="5-数据双向绑定" v-model="value">
        <!-- 6.v-for  -->
        <ul v-for="(item,index) in list">
            <li>{{item.name}}</li>
        </ul>
    </div>


    <script>
        // 2.new一个vue实例
        let app = new Vue({
            el:'#app',
            data:{
                lang:false,
                name:'金',
                value:'',
                list:[
                    {name:'刘德华'},
                    {name:'张学友'},
                    {name:'郭富城'},
                    {name:'黎明'}
                ]
            },
            methods:{
                doclick(){
                    this.lang = true
                }
            }
        })
    </script>
    
</body>
</html>